<!--
 * @Author: dengyongliang
 * @Date: 2021-04-14 16:12:55
 * @LastEditTime: 2021-08-18 13:52:21
 * @LastEditors: dengyongliang
 * @Description:
-->
<template>
  <div style="padding: 20px">
    <el-divider content-position="left">基础方法</el-divider>
    <el-button @click="dialogVisible1 = true">点击弹出</el-button>

    <el-divider content-position="left">拖拽</el-divider>
    <el-button @click="dialogVisible2 = true">点击弹出</el-button>

    <el-divider content-position="left">slot 子组件</el-divider>
    <el-button @click="dialogVisible3 = true">点击弹出</el-button>

    <si-dialog :visible.sync="dialogVisible1" :attrs="dialogAttrs">
      <div>当前内容</div>
      <template slot="footer">
        <el-button @click="dialogVisible1 = false">关闭</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </si-dialog>

    <si-dialog
      v-elDragDialog
      :visible.sync="dialogVisible2"
      :attrs="dialogAttrs2"
    >
      <div>拖拽弹窗</div>
    </si-dialog>

    <si-dialog :visible.sync="dialogVisible3" :attrs="dialogAttrs3">
      <dialog-form />
    </si-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import dialogForm from './components/dialogForm.vue'
export default {
  name: 'DemoDialog',
  components: {
    dialogForm
  },
  directives: {
    elDragDialog
  },
  props: [],
  data() {
    return {
      dialogAttrs: {
        width: '600px',
        title: '普通弹框',
        'custom-class': 'dialog-bass1'
      },
      dialogAttrs2: {
        width: '650px',
        title: '拖拽弹框',
        'custom-class': 'dialog-drag'
      },
      dialogAttrs3: {
        width: '600px',
        title: '普通弹框',
        'custom-class': 'dialog-bass3',
        'show-footer': true
      },
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content-page {
  .tab-content {
    width: 100%;
    padding: 20px;
  }
}
</style>
